import React from 'react';
import {
  Badge,
  Link,
  Space,
  Tooltip,
  Typography,
} from '@arco-design/web-react';
import Deactivate from '@/assets/deactivate.svg';
import Active from '@/assets/active.svg';
import { usedownloadDoc } from '@/utils/useDownload';
import Edit from '@/assets/edit.svg';
import ActionWrapper from '@/components/ActionWrapper';
// const { Text } = Typography;

export function getColumns(
  t: unknown,
  callback: (record: Record<string, unknown>, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  options: Array<any>,
  lang: string
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value));
  const customColumns = [
    {
      title: t['searchTable.columns.nameEn'],
      dataIndex: 'name',
      width: 220,
      sorter: true,
    },
    {
      title: t['searchTable.columns.emirate'],
      dataIndex: 'emirate',
      width: 120,
      render: (a: any): JSX.Element => {
        return <>{a.value[lang === 'en-US' ? 'en' : 'ar'] || '--'}</>;
      },
    },
    {
      title: t['searchTable.columns.Attachments'],
      dataIndex: 'attachments',
      width: 220,
      render: (a: any): JSX.Element => {
        const node = a.map((b, index) => (
          <Link hoverable={false} key={index} style={{ color: '#000' }}>
            <Typography.Text
              underline
              onClick={() => usedownloadDoc(b.href, b.fileName)}
            >
              <span>
                {b.fileName ? b.fileName : b.href}
                {b.rawFileName && `(${b.rawFileName})`}
              </span>
            </Typography.Text>
            ，
          </Link>
        ));
        return <div className={'ltr'}>{node}</div>;
      },
    },
    {
      title: t['searchTable.columns.active'],
      dataIndex: 'active',
      width: 140,
      render: (a: any): JSX.Element => {
        return (
          <>
            {a ? (
              <Badge status="success" text="True" />
            ) : (
              <Badge status="error" text="False" />
            )}
          </>
        );
      },
    },

    {
      title: t['searchTable.columns.action'],
      dataIndex: 'action',
      width: 140,
      render: (_: any, a: Record<string, unknown>): JSX.Element => (
        <ActionWrapper action="entities.entity/action">
          <Space size={20}>
            {a.active ? (
              <Tooltip
                position="bottom"
                content={t['searchTable.operation.deactivate']}
              >
                <Deactivate
                  style={{
                    width: 20,
                    cursor: 'pointer',
                    fill: 'var(--color-text-2)',
                  }}
                  onClick={() => callback(a, 'editActive')}
                />
              </Tooltip>
            ) : (
              <Tooltip
                position="bottom"
                content={t['searchTable.operation.active']}
              >
                <Active
                  style={{
                    width: 20,
                    cursor: 'pointer',
                    fill: 'var(--color-text-2)',
                    color: 'var(--color-text-2)',
                  }}
                  onClick={() => callback(a, 'editActive')}
                />
              </Tooltip>
            )}
            <Tooltip
              position="bottom"
              content={t['searchTable.operation.edit']}
            >
              <Edit
                style={{
                  width: 20,
                  cursor: 'pointer',
                  fill: 'var(--color-text-2)',
                }}
                onClick={() => callback(a, 'edit')}
              />
            </Tooltip>
          </Space>
        </ActionWrapper>
      ),
    },

    {
      title: t['searchTable.columns.nameAr'],
      dataIndex: 'nameAr',
      width: 180,
    },
    {
      title: t['searchTable.columns.ChairmanName'],
      dataIndex: 'chairman',
      width: 140,
      render: (a: any): JSX.Element => <>{a || '--'}</>,
    },
    {
      title: t['searchTable.columns.ShareholdingPercentage'],
      dataIndex: 'shareholdingPercentage',
      width: 230,
      render: (a: any): JSX.Element => <>{a || '--'}</>,
    },
  ];
  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value);
    return k === -1
      ? {
          title: a.label,
          dataIndex: a.value,
          width: a.width,
        }
      : customColumns[k];
  });
  return columns;
}
